<template>
<!--:class="{sticky: isSticky}"以对象的形式来实现在合适的高度实现吸顶的显示隐藏-->
  <div :class="{sticky: isSticky}"><van-tabs v-model="active" @click="onClick" line-width="60" line-height="2">
  <van-tab title="正在热映"></van-tab>
  <van-tab title="即将上映"></van-tab>
</van-tabs></div>
</template>

<script>
import Vue from 'vue';
import { Tab, Tabs } from 'vant';

Vue.use(Tab);
Vue.use(Tabs);
export default {
  data: function(){
    return{
      //active 默认tab索引
      active: 0,
      url:["/films/nowPlaying","/films/comingSoon"],
      //是否具备吸顶效果
      isSticky: false,
    }
  },
  methods: {
    /**index:默认是索引
     * title:tab的名称(文字内容)
     */
    onClick(index, title) {
      //console.log(index.title);
      //编程式导航
    this.$router.push(this.url[index])
    },
  },
//在生命周期中解决active刷新归零的情况
created(){
  this.active = this.url.indexOf(this.$route.path)
},
//在mounted周期里获取滚动条的高度
mounted(){
  //监听滚动条的滚动事件
  addEventListener("scroll",() => {
    // console.log(document.documentElement.scrollTop);
    //获取滚动条距离上面的高度
    let scrollTop = document.documentElement.scrollTop;
    if(scrollTop >= 300){
      //具备吸顶效果
      this.isSticky = true;
    }else{
      //不具备吸顶效果
      this.isSticky = false;
    }
  })
}
}
</script>

<style>
/*吸顶样式*/
.sticky{
  position: fixed;
  z-index: 999;
  width: 100%;
}
</style>